<template>
  <view class="review-index-container">
    <!-- 评价概览 -->
    <view class="review-summary">
      <view class="summary-header">
        <text class="title">商品评价</text>
        <view class="rating-overview">
          <text class="positive-rate">好评率 {{ summary.positiveRate }}%</text>
          <u-rate
            :value="summary.averageRating"
            readonly
            activeColor="#ff5500"
            size="28"
          ></u-rate>
          <text class="average-rating">{{ summary.averageRating }}分</text>
        </view>
      </view>

      <!-- 评价标签 -->
      <view class="review-tags" v-if="summary.tags && summary.tags.length > 0">
        <text 
          class="tag" 
          v-for="(tag, index) in summary.tags" 
          :key="index"
          @click="filterByTag(tag.name)"
        >
          {{ tag.name }} ({{ tag.count }})
        </text>
      </view>

      <!-- 评价数量和查看全部 -->
      <view class="review-count">
        <text>共 {{ summary.totalReviews }} 条评价</text>
        <view class="view-all" @click="navigateToReviewList">
          <text>查看全部</text>
          <u-icon name="arrow-right" color="#999" size="24"></u-icon>
        </view>
      </view>
    </view>

    <!-- 精选评价 -->
    <view class="featured-reviews" v-if="featuredReviews && featuredReviews.length > 0">
      <text class="section-title">精选评价</text>
      <view 
        class="review-item" 
        v-for="(review, index) in featuredReviews" 
        :key="index"
      >
        <view class="user-info">
          <image :src="review.userAvatar" mode="aspectFill" class="user-avatar"></image>
          <view class="user-details">
            <text class="user-name">{{ review.userName }}</text>
            <u-rate
              :value="review.rating"
              readonly
              activeColor="#ff5500"
              size="24"
            ></u-rate>
          </view>
          <text class="review-time">{{ review.createTime }}</text>
        </view>
        <text class="review-content">{{ review.content }}</text>
        <view class="review-images" v-if="review.images && review.images.length > 0">
          <image 
            v-for="(img, imgIndex) in review.images"
            :key="imgIndex"
            :src="img"
            mode="aspectFill"
            class="review-image"
            @click="previewImage(review.images, imgIndex)"
          ></image>
        </view>
        <text class="review-specs">规格: {{ review.specs }}</text>
      </view>
    </view>

    <!-- 无评价时的占位符 -->
    <u-empty
      v-else
      mode="message"
      icon="http://cdn.uviewui.com/uview/empty/message.png"
      text="暂无评价"
    ></u-empty>

  </view>
</template>

<script>
export default {
  data() {
    return {
      productId: '',
      summary: {
        totalReviews: 0,
        positiveRate: 0,
        averageRating: 0,
        tags: [] // [{ name: '质量好', count: 10 }, ...]
      },
      featuredReviews: []
    }
  },
  onLoad(options) {
    if (options.productId) {
      this.productId = options.productId
      this.loadReviewSummary()
      this.loadFeaturedReviews()
    } else {
      uni.showToast({ title: '缺少商品ID', icon: 'error' })
      uni.navigateBack()
    }
  },
  methods: {
    async loadReviewSummary() {
      try {
        // Assuming an API endpoint /products/{id}/reviews/summary exists
        const res = await this.$api.get(`/products/${this.productId}/reviews/summary`)
        this.summary = res.data
      } catch (error) {
        console.error('加载评价概览失败:', error)
      }
    },
    async loadFeaturedReviews() {
      try {
        // Assuming an API endpoint /products/{id}/reviews/featured exists
        const res = await this.$api.get(`/products/${this.productId}/reviews/featured`, { params: { limit: 3 } })
        this.featuredReviews = res.data
      } catch (error) {
        console.error('加载精选评价失败:', error)
      }
    },
    navigateToReviewList() {
      uni.navigateTo({
        url: `/pages/product/review/list?productId=${this.productId}`
      })
    },
    filterByTag(tagName) {
      // Navigate to the list page with the tag filter applied
      uni.navigateTo({
        url: `/pages/product/review/list?productId=${this.productId}&tag=${encodeURIComponent(tagName)}`
      })
    },
    previewImage(images, index) {
      uni.previewImage({
        urls: images,
        current: index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.review-index-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.review-summary {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;

  .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }

    .rating-overview {
      display: flex;
      align-items: center;
      gap: 10rpx;

      .positive-rate {
        font-size: 26rpx;
        color: #ff5500;
      }
      .average-rating {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-bottom: 20rpx;

    .tag {
      background-color: #fff1f0;
      color: #ff5500;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
  }

  .review-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    color: #666;

    .view-all {
      display: flex;
      align-items: center;
      color: #999;
    }
  }
}

.featured-reviews {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 12rpx;

  .section-title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
}

.review-item {
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .user-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }

    .user-details {
      flex: 1;
      .user-name {
        font-size: 28rpx;
        color: #333;
        display: block;
        margin-bottom: 4rpx;
      }
    }

    .review-time {
      font-size: 24rpx;
      color: #999;
    }
  }

  .review-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 16rpx;
    display: block;
  }

  .review-images {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-bottom: 16rpx;

    .review-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }
  }

  .review-specs {
    font-size: 24rpx;
    color: #999;
    background-color: #f5f5f5;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    display: inline-block;
  }
}
</style> 